<template>
	<view class="wrap" style="padding-bottom: 60px;">
		<view class="search">
			<u-search v-model="queryParam.orderParams" @custom="search" @search="search"></u-search>
			<!-- placeholder="产品编号 | 助记码 | 品牌 | 颜色 | 规格 | 型号" -->
		</view>
		<view class="filter">
			<view class="filter-item" @click="showType = true">
				全部分类
			</view>
			<!-- <view class="filter-item">
				数量排序
			</view> -->
			<view class="filter-item" @click="open">
				筛选
				<!-- <u-icon name="plus" :size="24"></u-icon> -->
			</view>
		</view>
		<mescroll-uni ref="mescrollRef" @init="mescrollInit" :top="top" @down="downCallback" @up="loadData">
			<view v-for="(item, index) in list" :key="item.id">
				<u-card class="task-list-item" :border="false" padding="20" margin="20rpx">
					<view class="" slot="body">
						<u-row gutter="16">
							<u-col span="12">
								<view class="apply-text" v-for="(child, idx) in columns" :key="idx">
									<span>{{ child.title }}：</span>{{ item[child.dataIndex] || '' }}
								</view>
							</u-col>
						</u-row>
						<u-number-box :positive-integer="false" v-model="item.selectNumber" @change="inputChange(item, index)"></u-number-box>
					</view>
				</u-card>
			</view>
		</mescroll-uni>

		<u-row :gutter="32" class="bottom-box" justify="center">
			<u-col span="12">
				<view><u-button type="primary" shape="circle" @click="submit()">确定</u-button></view>
			</u-col>
		</u-row>
		<uPopup v-model="show" mode="right" @close="close" @open="open" overlay>
			<view class="form-main">
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="150" labelAlign='right'>
					<u-form-item label="产品编号:" borderBottom ref="item1">
						<u-input v-model="queryParam.productCode" border="none" :clearable="false"
							placeholder="请输入产品编号"></u-input>
					</u-form-item>
					<u-form-item label="助记码:" borderBottom ref="item1">
						<u-input v-model="queryParam.mnemonicCode" border="none" :clearable="false"
							placeholder="请输入助记码"></u-input>
					</u-form-item>
					<u-form-item label="品牌:" borderBottom ref="item1">
						<u-input v-model="queryParam.brand" border="none" :clearable="false" placeholder="请输入品牌"></u-input>
					</u-form-item>
					<u-form-item label="颜色:" borderBottom ref="item1">
						<u-input v-model="queryParam.productColor" border="none" :clearable="false"
							placeholder="请输入颜色"></u-input>
					</u-form-item>
					<u-form-item label="规格:" borderBottom ref="item1">
						<u-input v-model="queryParam.spec" border="none" :clearable="false" placeholder="请输入规格"></u-input>
					</u-form-item>
					<u-form-item label="型号:" borderBottom ref="item1">
						<u-input v-model="queryParam.productModel" border="none" :clearable="false"
							placeholder="请输入型号"></u-input>
					</u-form-item>
					<u-form-item label="仓位:" borderBottom ref="item1">
						<u-input v-model="queryParam.spaceName" border="none" :clearable="false" placeholder="请选择产品仓位"
							type="select" :select-open="showSpace" @click="showSpace = true"></u-input>
					</u-form-item>
				</u-form>
				<view class="filter btn-bottom">
					<u-button @click="reset">重置</u-button>
					<u-button type="primary" @click="confirm">确定</u-button>
				</view>
			</view>

			<u-picker title="请选择产品仓位" mode="selector" v-model="showSpace" :range="spaceList" rangeKey="title"
				@confirm="selectSpace"></u-picker>
		</uPopup>

		<u-picker title="商品分类" mode="selector" v-model="showType" :range="category" rangeKey="title"
			@confirm="selectType"></u-picker>
	</view>
</template>

<script>
import MescrollMixins from '@/components/mescroll-uni/mescroll-mixins';
import ListMxin from './mixins/ListMxin';
import uNumberBox from '@/uview-ui/components/u-number-box/u-number-box';
import uPopup from '@/uview-ui/components/u-popup/u-popup';
import uPicker from '@/uview-ui/components/u-picker/u-picker';
export default {
	mixins: [MescrollMixins, ListMxin],
	components: {
		uNumberBox,
		uPopup,
		uPicker
	},
	data() {
		return {
			queryParam: {
				productCode: ''
			},
			current: 0,
			show: false,
			url: {
				list: 'bizProductList'
			},
			showType: false,
			showSpace: false,
			editInfo: {},
			selectList: [],
			category: [],
			spaceList: [],
			columns: [{
				title: '产品大类',
				dataIndex: 'categoryName',
				ellipsis: true,
				align: 'left',
				width: '12.8%'
			},
			// {
			// 	title: '产品编号',
			// 	dataIndex: 'productCode',
			// 	ellipsis: true,
			// 	align: 'left',
			// 	width: '12.8%'
			// },
			{
				title: '库存',
				dataIndex: 'number',
				ellipsis: true,
				align: 'left',
				width: '12.8%'
			},
			{
				title: '默认仓库',
				dataIndex: 'warehouseName',
				ellipsis: true,
				align: 'left',
				width: '12.8%'
			},
			{
				title: '品牌',
				dataIndex: 'brand',
				ellipsis: true,
				align: 'left',
				width: '12.8%'
			},
			{
				title: '颜色',
				dataIndex: 'productColor',
				ellipsis: true,
				align: 'left',
				width: '12.8%'
			},
			{
				title: '规格',
				dataIndex: 'spec',
				align: 'right',
				width: '12.8%'
			},
			{
				title: '型号',
				dataIndex: 'productModel',
				align: 'right',
				width: '12.8%'
			},
			{
				title: '仓库',
				dataIndex: 'warehouseName',
				align: 'right',
				width: '12.8%'
			},
			{
				title: '仓位',
				dataIndex: 'spaceName',
				align: 'right',
				width: '12.8%'
			},
			],
		}
	},

	computed: {
		top() {
			return this.CustomBar + 101
		},
	},
	onLoad(options) {
		this.editInfo = options
		this.getCategory()
		this.getSpaceList()
	},
	methods: {

		/**
		 * @获取仓位
		 */
		getSpaceList() {
			this.$u.api.getSpaceList({}).then(res => {
				if (res.code === 200) {
					let arr = res.data || []
					this.spaceList = arr.map(v => {
						let obj = {
							title: v.postion,
							value: v.id
						}
						return obj
					})
				} else {
					this.$u.toast(res.msg)
				}
			})
		},
		open() {
			this.show = true
		},
		close() {
			this.show = false
		},

		inputChange(item, index) {
			console.log(item);
			let idx = this.selectList.findIndex(v => v.id === item.id)
			if (idx > -1) {
				if (item.selectNumber) {
					this.selectList.splice(idx, 1, item)
				} else {
					this.selectList.splice(idx, 1)
				}
			} else {
				if (item.selectNumber) {
					this.selectList.push(item)
				}
			}
			console.log(this.selectList);
		},
		submit() {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2]; //上一个页面
			// 组装数据
			const selectList = this.selectList.map(v => {
				let obj = {
					productId: v.productId,
					warehouseName: v.warehouseName,
					spaceName: v.spaceName,
					warehouseId: v.warehouseId,
					spaceId: v.spaceId,
					model: v.productModel,
					number: v.selectNumber,
					gainStatus: 2,
					color:v.productColor,
					brand:v.brand,
					spec:v.spec,
					stock:v.number
				}
				return obj
			})
			// 对选择数组和原始数据求并集并处理
			let defaultIds = new Set(prevPage.$vm.list.map(v => v.productId))
			let selectIds = new Set(selectList.map(v => v.productId))
			let unionIds = [...defaultIds].filter(id => selectIds.has(id))
			if (unionIds.length && +this.editInfo.currentIndex === 0) {
				unionIds.forEach(val => {
					let index = prevPage.$vm.list.findIndex(v => v.productId === val)
					if (index > -1) {
						let item = prevPage.$vm.list[index]
						item.gainStatus = 3
						prevPage.$vm.list.splice(index, 1, item)
					}
				})
			}
			prevPage.$vm.list.push(...selectList)
			uni.navigateBack()
		},

		navTo(url, item) {
			item.currentIndex = this.current
			let query = stringify(item)
			uni.navigateTo({
				url: `${url}?${query}`
			});
		},
		confirm() {
			this.close()
			this.search()
		},
		reset() {
			this.queryParam = {}
			this.show = false
			this.list = []
			this.loadData({ page: 1, num: 10 })
		},
		getCategory() {

			this.$u.api.listTree({}).then(res => {
				this.category = [{ title: '全部', id: '' }]
				this.category.push(...res.data)

			})
		},
		selectType(index) {
			this.list = []
			this.queryParam.categoryId = this.category[index].id
			this.search()
		},
		selectSpace(index) {
			this.list = []
			this.queryParam.spaceId = this.spaceList[index].value
			this.queryParam.spaceName = this.spaceList[index].title
			this.search()
		},

	}

}
</script>

<style lang="scss" scoped>
@import 'index.scss';

page {
	background-color: #f5f5f5;
}

.wrap .search {
	background: #ffffff;
}

.apply-text {
	font-size: 28rpx;
	color: #333333;

	span {
		color: #999999;
	}
}

.user-images {
	width: 80px;
	height: 80px;
	margin-right: 8px;
}

.apply-list-foot {
	font-size: 28rpx;
}

.personnel-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;

	.personnel-user {
		position: relative;
		margin: 5px 9px 0;
	}

	.user-images {
		width: 48px;
		height: 48px;
		margin-right: 0;

	}

	.iconfont {
		position: absolute;
		top: -12px;
		right: -5px;
		color: #FE0100;
	}
}

.filter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	background-color: #ffffff;
}

.form-main {
	padding: 30rpx;
}

.btn-bottom {
	position: absolute;
	bottom: 80rpx;
	width: 90%;
}
</style>